<template>
  <div id="page">
    <div class="bg"></div>
    <div class="screen-container clearfix">
      <div class="screen-left">
        <header class="clearfix">
          <!--标题-->
          <div class="screen-title">
            <h3>全国数据监控</h3>
            <p>{{ currentTime }}</p>
          </div>
          <div class="num-1">
            <div
              class="service-data"
              v-for="(item, index) in headerData"
              :key="index"
            >
              <div class="img-box">
                <img :src="item.url" alt="" />
              </div>
              <div class="content">
                <h4>
                  {{ item.value | numberFilter
                  }}<i class="sign"
                    >{{ item.value | signFilter }}{{ item.sign }}</i
                  >
                </h4>
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div>
        </header>

        <div class="box map-box">
          <!--地图-->
          <div id="chart"></div>
          <!--省份信息-->
          <div id="province-info0"></div>
          <div id="province-info1"></div>
          <div id="province-info2"></div>
          <div id="province-info3"></div>
          <!--水球-->
          <h4 class="ebdc">电商数据</h4>
          <div id="polo0"></div>
          <div id="polo1"></div>
          <div id="polo2"></div>
          <!--设备-->
          <div id="equipment"></div>
          <!--服务类别-->
          <div id="COS"></div>
          <!--科室top5-->
          <div id="section"></div>
        </div>
      </div>
      <div class="screen-right">
        <div class="box bar-box">
          <div id="bar"></div>
        </div>
        <div class="box pie-box">
          <div id="pie0"></div>
          <div id="pie1"></div>
          <div id="pie2"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import geoJson from "@/assets/REGION/china.json";
import * as echarts from "echarts/core";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { MapChart, BarChart, PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  PieChart,
]);
export default {
  name: "screen",
  data() {
    return {
      currentTime: "",
      provinceData: [
        {
          text: "该省养老数据",
          data: [
            {
              value: Math.floor(Math.random() * 100 + 10),
              name: "养老机构",
            },
            { value: Math.floor(Math.random() * 200 + 10), name: "养老人数" },
            { value: Math.floor(Math.random() * 1000 + 10), name: "养老缴费" },
          ],
        },
        {
          text: "该省医疗数据",
          data: [
            {
              value: Math.floor(Math.random() * 100 + 10),
              name: "医疗机构",
            },
            { value: Math.floor(Math.random() * 200 + 10), name: "就诊人数" },
            { value: Math.floor(Math.random() * 300 + 10), name: "医生人数" },
            { value: Math.floor(Math.random() * 400 + 10), name: "医疗收入" },
          ],
        },
        {
          text: "该省药店数据",
          data: [
            {
              value: Math.floor(Math.random() * 100 + 10),
              name: "药店总数",
            },
            { value: Math.floor(Math.random() * 200 + 10), name: "购买人数" },
            { value: Math.floor(Math.random() * 200 + 10), name: "药品品种" },
            { value: Math.floor(Math.random() * 400 + 10), name: "销售收入" },
          ],
        },
        {
          text: "该省供应商数据",
          data: [
            {
              value: Math.floor(Math.random() * 100 + 10),
              name: "供应商",
            },
            { value: Math.floor(Math.random() * 200 + 10), name: "交易金额" },
          ],
        },
      ],
      headerData: [
        {
          url: require("@/assets/IMAGES/renci.png"),
          title: "服务人次",
          value: "2000",
          sign: "次",
        },
        {
          url: require("@/assets/IMAGES/jg.png"),
          title: "服务机构",
          value: "3000",
          sign: "个",
        },
        {
          url: require("@/assets/IMAGES/jine_1.png"),
          title: "交易金额",
          value: "140000",
          sign: "元",
        },
        {
          url: require("@/assets/IMAGES/yujing.png"),
          title: "智能预警次数",
          value: "2",
          sign: "次",
        },
      ],
      pieData: [
        {
          text: "服务统计",
          color: "#188df0",
          data: [
            { value: 18, name: "养老业务" },
            { value: 35, name: "医疗业务" },
            { value: 20, name: "药店业务" },
            { value: 17, name: "供应链业务" },
            { value: 10, name: "电商业务" },
          ],
        },
        {
          text: "机构统计",
          color: "#60EEFF",
          data: [
            { value: 18, name: "养老业务" },
            { value: 35, name: "医疗业务" },
            { value: 20, name: "药店业务" },
            { value: 17, name: "供应链业务" },
            { value: 10, name: "电商业务" },
          ],
        },
        {
          text: "交易统计",
          color: "#FFF369",
          data: [
            { value: 18, name: "养老业务" },
            { value: 35, name: "医疗业务" },
            { value: 20, name: "药店业务" },
            { value: 17, name: "供应链业务" },
            { value: 10, name: "电商业务" },
          ],
        },
      ],
      poloData: [
        { text: "SKU数量和", color: ["#FF6E76"], data: "2000" },
        { text: "交易次数", color: ["#188df0"], data: "200" },
        { text: "交易金额", color: ["#FFF369"], data: "2000万" },
      ],
    };
  },
  methods: {
    //地图
    drawMap() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      echarts.registerMap("china", geoJson);
      myChart.setOption(
        (option = {
          tooltip: {
            trigger: "item",
            formatter: (e) => {
              if (e.data.list) {
                let itemArray = e.data.list;
                let valueStr = "";
                if (itemArray) {
                  for (let index = 0; index < itemArray.length; index++) {
                    valueStr = valueStr + itemArray[index] + "<br/>";
                  }
                }
                return e.name + "<br />" + valueStr;
              } else {
                return;
              }
            },
          },
          visualMap: {
            type: "piecewise", // 类型为分段型
            min: 0,
            max: 10,
            show: false,
            inRange: {
              color: ["#FF6E76", "#60EEFF", "#FFF369", "#188df0"],
            },
          },
          //通过series 中的data更新数据
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "china",
              label: {
                show: false,
              },
              //图形内文字
              // emphasis: {
              //   label: {
              //     show: false,
              //   },
              // },
              data: [
                {
                  name: "新疆维吾尔自治区",
                  value: 6,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "西藏自治区",
                  value: 8,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "内蒙古自治区",
                  value: 5,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "青海省",
                  value: 10,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "四川省",
                  value: 4,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "黑龙江省",
                  value: 5,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "甘肃省",
                  value: 2,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "云南省",
                  value: 3,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "广西壮族自治区",
                  value: 10,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "湖南省",
                  value: 10,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "陕西省",
                  value: 10,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "广东省",
                  value: 0,
                },
                {
                  name: "吉林省",
                  value: 5,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "河北省",
                  value: 4,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "湖北省",
                  value: 10,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "贵州省",
                  value: 7,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "山东省",
                  value: 6,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "江西省",
                  value: 5,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "河南省",
                  value: 4,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "辽宁省",
                  value: 8,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "山西省",
                  value: 5,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "安徽省",
                  value: 7,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "福建省",
                  value: 8,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "浙江省",
                  value: 10,
                  list: [
                    "养老院机构: 12",
                    "医疗机构: 2",
                    "药店：2",
                    "供应商：5",
                  ],
                },
                {
                  name: "江苏省",
                  value: 0,
                },
                {
                  name: "重庆市",
                  value: 0,
                },
                {
                  name: "宁夏回族自治区",
                  value: 4,
                },
                {
                  name: "海南省",
                  value: 0,
                },
                {
                  name: "台湾省",
                  value: 0,
                },
                {
                  name: "北京市",
                  value: 4,
                },
                {
                  name: "天津市",
                  value: 0,
                },
                {
                  name: "上海市",
                  value: 4,
                },
                {
                  name: "香港特别行政区",
                  value: 0,
                },
                {
                  name: "澳门特别行政区",
                  value: 0,
                },
              ],
            },
          ],
        })
      );
      myChart.on("click", () => {
        this.provinceData = [
          {
            data: [
              {
                value: Math.floor(Math.random() * 100 + 10),
                name: "养老机构",
              },
              { value: Math.floor(Math.random() * 200 + 10), name: "养老人数" },
              {
                value: Math.floor(Math.random() * 1000 + 10),
                name: "养老缴费",
              },
            ],
          },
          {
            data: [
              {
                value: Math.floor(Math.random() * 100 + 10),
                name: "医疗机构",
              },
              { value: Math.floor(Math.random() * 200 + 10), name: "就诊人数" },
              { value: Math.floor(Math.random() * 300 + 10), name: "医生人数" },
              { value: Math.floor(Math.random() * 400 + 10), name: "医疗收入" },
            ],
          },
          {
            data: [
              {
                value: Math.floor(Math.random() * 100 + 10),
                name: "药店总数",
              },
              { value: Math.floor(Math.random() * 200 + 10), name: "购买人数" },
              { value: Math.floor(Math.random() * 200 + 10), name: "药品品种" },
              { value: Math.floor(Math.random() * 400 + 10), name: "销售收入" },
            ],
          },
          {
            data: [
              {
                value: Math.floor(Math.random() * 100 + 10),
                name: "供应商",
              },
              { value: Math.floor(Math.random() * 200 + 10), name: "交易金额" },
            ],
          },
        ];

        for (let index = 0; index < this.provinceData.length; index++) {
          let value = "province-info" + index;
          this.drawProvincePie(value, this.provinceData[index]);
        }
      });
      option && myChart.setOption(option);
    },
    //省份信息
    drawProvincePie(dom, info) {
      //清空初始化
      echarts.init(document.getElementById(dom)).dispose();

      var chartDom = document.getElementById(dom);

      var myChart = echarts.init(chartDom);

      var option;
      option = {
        title: {
          text: info.text,
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        legend: {
          show: false,
        },
        color: ["#FF6E76", "#60EEFF", "#FFF369", "#188df0"],
        tooltip: {},
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              color: "#fff",
              fontSize:10,
              formatter: "{b}\n{c}",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              opacity: 0.8,
            },
            data: info.data,
          },
        ],
      };

      //设置默认选中高亮部分
      let index = 0; //默认选中第一个

      option && myChart.setOption(option);
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      }); //设置默认选中高亮部分

      myChart.on("mouseover", (e) => {
        if (e.dataIndex != index) {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }
      });

      myChart.on("mouseout", (e) => {
        index = e.dataIndex;
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      });
    },
    //预警信息，柱状图
    drawBar() {
      var chartDom = document.getElementById("bar");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: true,
          },
          data: [
            {
              value: "紧急呼救",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "防走失定位",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "长者睡眠",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "体征数据",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          ],
        },
        grid: {
          x: 60,
          y: 20,
          x2: 5,
          y2: 20,
        },
        series: [
          {
            data: [
              {
                value: 100,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FF6E76" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 120,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#60EEFF" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 100,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FFF369" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 50,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#188df0" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
            ],
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              valueAnimation: true,
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //饼状图
    drawPie(val, info) {
      var chartDom = document.getElementById(val);
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      option = {
        title: {
          text: info.text,
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        color: info.color,
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: false,
          min: 0,
          max: 60,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            roseType: "radius",
            data: info.data.sort(function (a, b) {
              return a.value - b.value;
            }),
            label: {
              color: "#eee",
              fontSize: 10,
              formatter: "{b}\n{c}%",
            },
            itemStyle: {
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      myChart.on("click", (e) => {
        this.$router.push({
          path: "/tradeStatistics",
          query: {
            title: "交易金额",
          },
        });
      });
      option && myChart.setOption(option);
    },
    //水球
    drawPolo(dom, info) {
      var chartDom = document.getElementById(dom);
      var myChart = echarts.init(chartDom);
      var option;
      myChart.setOption(
        (option = {
          title: {
            text: info.text,
            left: "center",
            bottom: 0,
            textStyle: {
              fontSize: 12,
              fontWeight: "normal",
              color: "#fff",
            },
          },
          series: [
            {
              type: "liquidFill",
              data: [0.6, 0.5, 0.4, 0.3],
              color: info.color,
              label: {
                formatter: function () {
                  return info.data;
                },
                textStyle: {
                  fontSize: 14,
                },
              },
              outline: {
                show: false, //边框
              },
            },
          ],
        })
      );
      myChart.on("click", () => {
        this.$router.push({
          path: "/branch",
          query: {
            title: "电商数据",
          },
        });
      });
      option && myChart.setOption(option);
    },
    //科室top5
    drawSection() {
      var chartDom = document.getElementById("section");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "科室收入TOP5",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          x: 65,
          y: 50,
          x2: 5,
          y2: 20,
        },
        xAxis: {
          type: "category",
          data: [
            {
              value: "妇科",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "皮肤科",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "内科",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "外科",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "儿科",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          ],
          // axisLabel:{
          //   rotate:20
          // }
        },
        yAxis: {
          type: "value",
          name: "累计金额(万元)",
          nameTextStyle: {
            fontSize: 8,
          },
        },
        series: [
          {
            data: [7000, 6000, 5000, 8000, 7000],
            type: "bar",
            showBackground: true,
            barWidth: 20,
            itemStyle: {
              borderRadius: [80, 80, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#188df0" },
                { offset: 1, color: "#000" },
              ]),
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //设备
    drawEquipment() {
      var chartDom = document.getElementById("equipment");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      option = {
        title: {
          text: "设备",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: true,
          },
          data: [
            {
              value: "设备数",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "设备使用数",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          ],
        },
        grid: {
          x: 60,
          y: 30,
          x2: 5,
          y2: 20,
        },
        series: [
          {
            data: [
              {
                value: 100,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#60EEFF" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 120,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FF6E76" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
            ],
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              valueAnimation: true,
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    //服务类别
    drawCOS() {
      var chartDom = document.getElementById("COS");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;

      option = {
        title: {
          text: "服务类别",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: true,
          },
          data: [
            {
              value: "助浴",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "陪护",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "失智失能照护",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
            {
              value: "陪同就医",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          ],
        },
        grid: {
          x: 62,
          y: 30,
          x2: 5,
          y2: 20,
        },
        series: [
          {
            data: [
              {
                value: 100,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#a90000" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 120,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FF6E76" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 100,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#60EEFF" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
              {
                value: 50,
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#FFF369" },
                    { offset: 1, color: "rgb(26,45,76)" },
                  ]),
                },
              },
            ],
            type: "bar",
            label: {
              show: true,
              color: "#fff",
              valueAnimation: true,
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  filters: {
    numberFilter(e) {
      if (e > 10000) {
        return e / 10000;
      } else if (e > 100000000) {
        return e / 100000000;
      } else {
        return e;
      }
    },
    signFilter(e) {
      if (e > 10000) {
        return "万";
      } else if (e > 100000000) {
        return "亿";
      } else {
        return;
      }
    },
  },
  created() {
    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);
  },
  mounted() {
    this.$nextTick(() => {
      this.drawMap();

      for (let index = 0; index < this.provinceData.length; index++) {
        let value = "province-info" + index;
        this.drawProvincePie(value, this.provinceData[index]);
      }

      this.drawBar();

      for (let index = 0; index < this.poloData.length; index++) {
        let value = "polo" + index;
        this.drawPolo(value, this.poloData[index]);
      }
      this.drawEquipment();
      this.drawCOS();

      this.drawSection();
      for (let index = 0; index < this.pieData.length; index++) {
        let value = "pie" + index;
        this.drawPie(value, this.pieData[index]);
      }
    });
    window.onresize = () => {
      this.drawMap();
      for (let index = 0; index < this.provinceData.length; index++) {
        let value = "province-info" + index;
        this.drawProvincePie(value, this.provinceData[index]);
      }
      this.drawBar();
      for (let index = 0; index < this.poloData.length; index++) {
        let value = "polo" + index;
        this.drawPolo(value, this.poloData[index]);
      }
      this.drawEquipment();
      this.drawCOS();
      this.drawSection();
      for (let index = 0; index < this.pieData.length; index++) {
        let value = "pie" + index;
        this.drawPie(value, this.pieData[index]);
      }
    };
  },
};
</script>
<style lang="scss" scoped>
#page {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.bg {
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-image: url("../assets/IMAGES/background.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-filter: blur(6px); /* Chrome, Safari, Opera */
  filter: blur(6px);
}
.screen-container {
  position: relative;
  z-index: 3;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}
.screen-left {
  float: left;
  width: 80%;
  height: 100%;
  header {
    height: 10%;
    .screen-title {
      h3 {
        font-family: "Microsoft Yahei", Arial, sans-serif;
        font-size: 27px;
        color: #fff;
        text-shadow: #fff 0px 0px 31px;
        font-weight: bold;
        justify-content: center;
        text-align: center;
        margin-bottom: 10px;
      }
      p {
        font-family: "Microsoft Yahei", Arial, sans-serif;
        font-size: 16px;
        color: #fff;
        font-weight: normal;
        justify-content: center;
      }
    }
    .num-1 {
      float: right;
      display: flex;
      .img-box {
        height: 40px;
        width: 60px;
        text-align: center;
      }
      .content {
        flex: 1;
        text-align: center;
        h4 {
          font-size: 27px;
          font-weight: bold;
          color: #42a5e9;
        }
        p {
          font-size: 14px;
          color: #f37b1d;
        }
      }
      .sign {
        font-family: "Microsoft Yahei";
        font-size: 19px;
        color: rgb(204, 204, 204);
        align-self: baseline;
        margin-left: 8px;
        margin-top: 0px;
      }
      .service-data {
      }
    }
    .num-1 > div {
      height: 100px;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
  header > div {
    float: left;
  }
}
.screen-right {
  float: left;
  width: 20%;
  height: 100%;
}
.box {
  border-image-source: url("../assets/IMAGES/border.png");
  border-image-slice: 35 fill;
  border-width: 25px;
  border-style: solid;
  background-clip: padding-box;
  filter: blur(0px);
  overflow: hidden;
}
.map-box {
  position: relative;
  height: 90%;
  width: 100%;
  box-sizing: border-box;
}
.ebdc {
  position: absolute;
  top: 0;
  z-index: 5;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
#polo0,
#polo1,
#polo2 {
  position: absolute;
  top: 0;
  height: 18%;
  width: 10%;
  z-index: 5;
  box-sizing: border-box;
}
#polo0 {
  left: 0;
}
#polo1 {
  left: 10%;
}
#polo2 {
  left: 20%;
}
#section {
  position: absolute;
  bottom: 0;
  height: 20%;
  width: 35%;
  z-index: 5;
  box-sizing: border-box;
}
.bar-box {
  height: 21%;
  width: 100%;
  box-sizing: border-box;
}
.pie-box {
  height: 80%;
  width: 100%;
  box-sizing: border-box;
}
#chart {
  height: 100%;
  width: 80%;
}
#equipment {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 5;
  height: 20%;
  width: 30%;
  box-sizing: border-box;
}
#COS {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
  height: 20%;
  width: 30%;
  box-sizing: border-box;
}
#province-info0,
#province-info1,
#province-info2,
#province-info3 {
  position: absolute;
  top: 0;
  z-index: 5;
  height: 20%;
  width: 20%;
}
#province-info0 {
  top: 0;
  right: 12%;
}
#province-info1 {
  top: 0;
  right: -2%;
}
#province-info2 {
  top: 20%;
  right: 12%;
}
#province-info3 {
  top: 20%;
  right: -2%;
}
#bar {
  height: 100%;
  width: 100%;
}
#pie0,
#pie1,
#pie2 {
  height: 33.33%;
  width: 100%;
}
</style>